<template>

  <div class="mod-demo-echarts">
    <el-alert
      v-if="false"
      title="提示："
      type="warning"
      :closable="false">
      <div >
        <p class="el-alert__description"></p>
      </div>
    </el-alert>
    <el-row v-if="false">
      <el-col :span="24"  align="right">



      </el-col>
    </el-row>

 <div class="block">

    <el-carousel trigger="click" :height="height" @change="changeStatus" indicator-position="outside">
      <el-carousel-item v-for="item in list" :key="item.name">
       
    <el-row >

      <el-col :span="24"  v-if="true">
        <div style="text-align:center;"><h3>{{item.text}}</h3></div>
      </el-col>

    </el-row>

    <el-row :gutter="20">

      <el-col :span="24"  v-if="true">
        <el-card>
          <div :id="item.name"  class="chart-box" ></div>
        </el-card>
      </el-col>

    </el-row>

      </el-carousel-item>
    </el-carousel>
  </div>


  </div>

</template>

<script>
  import echarts from 'echarts'
  export default {
    data () {
      return {
    
        list: [
              {'name': 'J_chartBarBox0', 'text': '按接入机构统计各类业务量汇总'}
              , 
              {'name': 'J_chartBarBox1', 'text': '按接入机构统计抵押登记设立业务量'}
              ,
              {'name': 'J_chartBarBox2', 'text': '按登记中心统计各类业务量汇总'}
              ,
               {'name': 'J_chartBarBox3', 'text': '按登记中心统计抵押登记设立业务量'}
              
              ],
        chartBar: null,
        autoHeight: 400,
        value: true,
        height: '400px'

      }
    },
    mounted () {

      this.initChartBar(0)


    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
 
       this.chartBar.resize()

    },
    methods: {

      changeStatus(callback){
        console.log(callback)
        this.initChartBar(callback)
      },
      
      resize(){
        if (this.chartBar) {
          this.chartBar.resize({height:this.autoHeight})
        }

      },

      // 柱状图
      initChartBar (i) {
        this.chartBar = echarts.init(document.getElementById('J_chartBarBox' + i))
        if (this.chartBar){
          this.chartBar.showLoading();
        }
        var params = this.getParams(i)
        this.$http({
              url: this.$http.adornUrl(`/bdc/bdcbusiness/echart/bar`),
              method: 'get',
              params: this.$http.adornParams(params)
            }).then(({data}) => {
              if (data && data.code === 0) {
                var option = data.options
                
                this.chartBar.setOption(option)
                var len = option.yAxis.data.length;
                
                if (len && len > 0){
                  this.autoHeight = 400 * len
                }
                this.height = this.autoHeight + 100  + "px"
                
                this.resize()
               
                window.addEventListener('resize', () => {
                  this.chartBar.resize()
                })
                
              } else {
                this.$message.error(data.msg)
              }
              if (this.chartBar){
                  this.chartBar.hideLoading();
                }
            })
        
      },

      getParams(i){
          if (i == 0){
            return {'queryway':'a0'}
          }else if (i == 1){
            return {'queryway':'d0'}
           
          }else if (i == 2){
            return {'queryway':'ad0'}
          }
          else if (i == 3){
            return {'queryway':'dd0'}
          }
          else{
            return {'queryway':''}
          }
      }
    }   
  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      // min-height: 100px;
      width: 100%;
    }
  }

    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 50px;
    margin: 0;
  }


</style>
